<template>
	<div class="mycart">
		<header>
			<i class="el-icon-notebook-2"><span> 我的购物车清单</span></i>
			<hr/>
		</header>
		<div class="shop">
			<template>
				<el-table :data="num2" border style="width: 100%">
						<el-table-column prop="chacked" label="选择" width="120px">
							<template slot-scope="scope">
								<input type="checkbox" v-model="check" :value="scope.row.id" @change="checkOne()"/>
							</template>
						</el-table-column>
						<el-table-column prop="book.pic" label="图片" width="200px">
							<template slot-scope="scope">
								<img :src="`${$ip}/api/public/showimg/${scope.row.book.pic}`"
									style="width: 110px;height: 100px;border-radius: 5px;">
							</template>
						</el-table-column>
						<el-table-column prop="book.name" label="商品名称"></el-table-column>
						<el-table-column prop="price" label="商品价格"></el-table-column>
						<el-table-column label="商品数量">
							<template slot-scope="scope">
							  <el-input-number v-model="scope.row.num" controls-position="right" @change="handleChange" :min="1"></el-input-number>
							</template>
						</el-table-column>
						<el-table-column prop="sum" label="商品总价"></el-table-column>
				</el-table>
				<div class="div1"  v-show="num2.length!= 0">
					<input type="checkbox" v-model="checkall" @change="checkAll()"/>全选
				</div>
				<div v-show="num2.length!= 0">
					<el-divider><span style="color: #f35100;font-size: 18px;">下单</span></i></el-divider>
				</div>
			</template>
			<div class="div2" v-show="num2.length!= 0">
				<span>总价：￥{{sum}}</span><el-button type="danger" @click="addOrder()">去下单</el-button>
			</div>
		</div>
		<el-empty v-if="num2.length== 0" :image-size="200" description="暂无商品 , 请前往添加购物"></el-empty>
	</div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
	name:'MyCart',
	data(){
		return{
			goos:[],
			sum:0,
			checkall:false,
			check:[]
		}
	},
	computed:{
		num2(){
			this.goos.forEach((item)=>{
				item.sum =item.price * item.num;
			})
			return this.goos;
		},
		...mapState('shop',['list'])
	},
	methods: {
		...mapActions('shop',['actionHistory','delHistory']),
		find(num){
		        let bool = false;
		        this.list.forEach((item)=>{
		            if(item.id == this.goos[num].id){
		                bool = true;
		                return;
		            }
		        })
		        return bool;
		},
		addOrder(){
			if(this.check.length==0){
				this.$message.error('请选择商品');
				return;
			}
			this.check.forEach((item)=>{
				let n = this.goos.findIndex(obj => obj.id == item);
				console.log('n='+n);
				console.log(this.find(n))
				if(!this.find(n)){
					let m = this.goos[n];
					this.actionHistory({
						checked:true,
						id:m.id,
						num:m.num,
						price:m.price,
						book:{
							id:m.book.id,
							name:m.book.name,
							pic:m.book.pic,
						}
					})
				}
			})
			this.$router.push({path:'/pc/addorder'});
		},
		handleChange(value) {
			console.log(value);
			this.price();
		},
		checkOne(){
			this.check =Array.from(new Set(this.check));
			this.checkall =this.check.length == this.goos.length?true:false;
			this.price();
		},
		checkAll(){
			if(this.checkall){
				this.goos.forEach((item)=>{
					this.check.push(item.id);
				})
				this.check =Array.from(new Set(this.check));
			}else{
				this.check=[];
			}
			this.price();
		},
		price(){
			let price =0;
			this.check =Array.from(new Set(this.check));
			
			this.check.forEach((item)=>{
				this.goos.forEach((i)=>{
				if(item==i.id){
					price += i.price*i.num;
					}
				})
			})
			this.sum =price;
		}
	},
	mounted(){
		//查询我的购物车商品
		this.$get("/api/fore/cart/findMyCarts").then((resp)=>{
			this.goos =resp.data.data;
			console.log(this.goos);
			this.goos.forEach((item)=>{
				item.sum =item.price * item.num;
			})
		})
		console.log(this.goos);
	}
}
</script>

<style scoped>
.mycart{
	width: 80%;
	margin: 0 auto;
}
.mycart header{
	width: 100%;
	height: 50px;
	margin-top: 10px;
	text-align: center;
}
.mycart header i{
	font-size: 16px;
	font-weight: 480;
}
.mycart .shop input[type="checkbox"]{
	width: 20px;
	height: 20px;
}
.mycart .shop input[type="checkbox"]:checked{
	background-color: deepskyblue;
}
.mycart .div1{
	display: flex;
	align-items: center;
	margin-top: 10px;
}
.mycart .div2{
	width: 300px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: 80%;
}
</style>
